<template>
  <div class="rate">
    <div class="header" @click="collapse">
      <span class="font14" :class="{ header_complete: rate.appraiseStatus === 'appraised' }">{{
        this.$t('business.businessSatisfaction')
      }}</span>
      &nbsp;
      <span class="font12">{{ appraiseStatus[rate.appraiseStatus] }}</span>
      <i class="el-icon-arrow-right fr" :class="{ 'is-active': isOpen }"></i>
    </div>
    <div class="content" :style="{ display: isOpen ? 'block' : 'none' }" v-if="(rate.choose && rate.choose.length) || (rate.satisfaction && rate.satisfaction.value)">
      <template>
        <div class="title" v-if="rate.satisfaction && rate.satisfaction.value">
          {{ rate.satisfaction.subTitle }}
        </div>
        <div class="stars" style="display: flex;" v-if="rate.satisfaction && rate.satisfaction.value">
          <div class="rate-status global-status" :class="{ 'rate-status1': rate.satisfaction.value > 2 }">
                {{ rate.satisfaction.name }}
              </div>
              <div v-if="rate.satisfaction.tags.length">【{{ rate.satisfaction.tags.join('，') }}】</div>
        </div>
      </template>
      <div class="title" v-if="rate.choose && rate.choose.length">
        {{ rate.chooseTitle }}
      </div>
      <table class="stars">
        <tbody valign="top">
          <tr v-for="(item, index) in rate.choose" :key="index">
            <td class="subtitle" :title="item.subTitle">
              <span class="ellipsis">{{ item.subTitle }}</span
              >：
            </td>
            <td class="rate-status" :class="{ 'rate-status1': item.value > 2 }">{{ item.name }}</td>
            <td v-if="item.tags.length">【{{ item.tags.join('，') }}】</td>
          </tr>
        </tbody>
      </table>
      <!-- <div v-for="(item, index) in rate.choose">
          <span>{{item.subTitle}}</span>
          <span class="rate-status" :class="{'rate-status1': item.value > 2}">{{item.name}}</span>
          <span>【{{item.tags.join('，')}}】</span>
        </div> -->
      <div class="title" v-if="rate.otherQuestionContent">
        {{ rate.otherQuestionTitle }}
      </div>
      <div class="question-content" v-if="rate.otherQuestionContent">{{ rate.otherQuestionContent }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'InputTag',
  props: {
    rate: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      appraiseStatus: {
        send: this.$t('business.waitSatisfaction'), // 已发送
        appraised: this.$t('business.completeSatisfaction') // 已评价
      },
      isOpen: false
    }
  },
  computed: {},
  watch: {
    rate() {
      this.isOpen = false
    }
  },
  methods: {
    // 展开，收起
    collapse() {
      if (this.rate.appraiseStatus === 'send') {
        return
      }
      this.isOpen = !this.isOpen
    }
  },
  beforeMount() {
    // if (!this.$store.state.business.appraiseTemplates) {
    //   this.$store.dispatch('getAppraiseTemplates', {}).then((res) => {
    //     if (res.success) {
    //       this.$store.commit('business/SET_APPRAISE', res.data)
    //     }
    //   })
    // }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../assets/common.styl'
.rate
  background-color #f2f2f2
  border-radius 5px
  margin-top 20px
.header
  color $cf-gray6
  line-height 40px
  padding 0 15px
.header_complete
  color $cf-gray0
.el-icon-arrow-right
  margin-right: 8px;
  transition: transform .3s;
  float: right;
  color $cf-level4
  line-height: 40px;
.el-icon-arrow-right.is-active
  transform: rotate(90deg)
.content
  will-change height
  border-top 1px solid $c-border2
  padding 20px
  .title
    padding-bottom 10px
  .stars
    padding-left 28px
    font-size 12px
    padding-bottom 20px
    tr
      margin-bottom 10px
      line-height 17px
    .subtitle
      text-align right
      display flex
      span
        display inline-block
        flex-grow 1
        max-width 100px
  .question-content
    font-size 12px
    padding-left 28px
.rate-status
  width 155px
  box-sizing border-box
  color $cf-gray5
  padding 0 16px
.rate-status1
  color $cf-color0
.global-status
  max-width: 155px;
  width: auto;
  padding: 0px;
  padding-right: 16px;
</style>
